<template>
  <div>
    <main>
      <div class="search">
        <div class="lookover">查看作业批改</div>
        <div class="name">姓名：{{ uName }}</div>
      </div>

      <!-- 作业列表 -->
      <div class="work_list">
        <div class="title">已布置作业({{ total }})</div>
        <ul>
          <li v-for="(item, index) in workList" :key="index">
            {{
              page > 1
                ? (page - 1) * 20 + index + 1
                : index + 1 > 9
                ? index + 1
                : "0" + (index + 1)
            }}.
            <span class="list_title">{{ item.title }}</span>
            <span class="tags">
              <el-tag class="ttNum" v-if="item.titleNumber">{{
                item.titleNumber
              }}</el-tag>
              <el-tag class="jj" v-if="item.isJt == 1">机经</el-tag>
              <el-tag class="yc" v-if="item.isYc == 1">预测</el-tag>
              <!-- <el-tag class="gp">高频</el-tag> -->
            </span>

            <span class="pub_time">{{ item.createdate | formatTimeHM }}</span>
            <span
              class="exercise_info"
              :class="item.answer ? 'style_submit' : ''"
              @click="toExerciseDetail(item, index + 1)"
              >题目详情</span
            >
          </li>
        </ul>
      </div>
      <!-- 分页器 -->
      <!-- <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination> -->
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '是'
      }, {
        value: '选项2',
        label: '否'
      }],
      value: '',
      workList: [], // 作业列表
      userId: '',  // 搜索作业列表的学生id
      uName: '',
      searchDate: '', // 搜索作业列表的日期

      total: 0,//总题数
      page: 1,
      rows: 20,
      pages: 0, //总页数
    }
  },
  created () {
    this.userId = sessionStorage.getItem('uid')
    this.uName = sessionStorage.getItem('uname')
    this.getDate()
    // console.log(this.userId);
    this.getTodayWork(this.page)
  },
  methods: {
    getDate () {
      var date = new Date(Date.now());//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = date.getDate() - 1;
      let h = date.getHours() + ':';
      let m = date.getMinutes() + ':';
      let s = date.getSeconds();
      let newDate = Y + M + D;//时分秒可以根据自己的需求加上
      // console.log(newDate);
      this.searchDate = newDate
      // console.log(this.searchDate);
    },
    getTodayWork (page) {
      if (this.userId != '' && this.userId != 'null') {
        // console.log(this.userId);
        // console.log(this.searchDate);
        sendPost(api.getUserWorkList, {
          // page: page,
          // rows: 20,
          // nickanme:this.uName,
          userId: this.userId,
          date: this.searchDate
        }).then(res => {
          console.log(res, '--昨日作业列表');
          this.workList = res.data
          sessionStorage.setItem('workList', JSON.stringify(res.data))
          this.total = res.data.length
          this.page = res.data.page
          this.pages = res.data.pages
          this.rows = res.data.rows
        })
      }
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      this.page = value
      this.getTodayWork(this.page)
    },
    // 查看题目详情
    toExerciseDetail (info, i) {
      this.$router.push('/CheckWork/ExerciseDetail')
      sessionStorage.setItem('index', i)
      sessionStorage.setItem('idx', i > 9 ? i : '0' + i)
      sessionStorage.setItem('detail', JSON.stringify(info))
    },
    // 重置功能
    // 取消复选框选择状态
    toggleSelection (rows) {

    }
  }
}
</script>

<style lang="less" scoped>
main {
  width: 75rem;
  margin: auto;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .style_submit {
    color: #00cccc;
    border: 1px solid #00cccc !important;
  }
  .search {
    margin-top: 1.875rem;
    height: 4rem;
    line-height: 4rem;
    background-color: #f1f1f1;
    display: flex;
    margin: 1.5rem 0;
    .btn_search {
      margin-left: 1.25rem;
    }
    .el-select {
      width: 12rem;
      margin-right: 1.5rem;
      margin-left: 24.9375rem;
    }
    .el-button {
      margin-top: 0.875rem;
      height: 2.5rem;
    }
    .lookover {
      font-size: 1.25rem;
      font-weight: bold;
      padding: 0 1.25rem;
      color: #333;
    }
    .name {
      font-size: 1.25rem;
      font-weight: bold;
      padding-right: 1.25rem;
      color: #333;
    }
  }
  // 列表
  .work_list {
    border: 1px solid #dedede;
    border-bottom: 0 solid #000;
    // 标题
    .title {
      height: 3.75rem;
      line-height: 3.75rem;
      font-size: 1.25rem;
      text-align: left;
      padding-left: 1.25rem;
      border-bottom: 1px solid #dedede;
    }
    ul {
      li {
        padding: 0 1.25rem;
        text-align: left;
        height: 50px;
        line-height: 3.125rem;
        font-size: 1.25rem;
        border-bottom: 1px solid #dedede;
        display: flex;
        cursor: pointer;
        .tags {
          display: inline-block;
          margin-left: 2rem;
          width: 16.25rem;
          .el-tag {
            margin: 0 6px;
            color: #fff;
            border: none;
            font-size: 1rem;
            line-height: 2rem;
          }
          .jj {
            background-color: #ff9b4f;
          }
          .yc {
            background-color: #00cccc;
          }
          .ttNum {
            background-color: #94d0f7;
          }
        }
        .list_title {
          display: inline-block;
          width: 30.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .pub_time {
          margin-right: 5rem;
        }
        .exercise_info {
          font-size: 1rem;
          display: inline-block;
          width: 5rem;
          height: 1.875rem;
          line-height: 1.875rem;
          border: 1px solid #333;
          border-radius: 6px;
          text-align: center;
          margin: auto 0;
        }
      }
      li:hover {
        background-color: #f1f1f1;
      }
    }
  }
  // 分页器
  .el-pagination {
    text-align: center;
    margin-top: 6.25rem;
  }
}
</style>
